<template>
	<view class="contener">
		<skeleton :skeleton="skeleton" :loading="loading">
			<block>
				<view class="cartBox">
					<view class="cartList">
						<view class="center_horizontal" style="margin:25rpx 0;">

							<view class="imgBox">
								<image :src="imgapi+product.avatar" style="width: 75px;height: 75px;margin-top: 6px;">
								</image>
							</view>
							<view class="rightBox">
								<view class="rightBoxtop line-clamp2">
									{{product.title}}
								</view>
								<view class="food-btm textOver">
									<text>{{product.overview}}</text>
								</view>
							</view>
						</view>
						<view class="cartBoxBot">
							<view> 种植价格(次) </view>
							<view> <text class="food-price">￥{{product.growPrice}}</text> </view>
						</view>
					</view>
					<view class="cartList">
						<view class="cartBoxBot2">
							<view>
								备注
							</view>
							<view style="text-align: right;">
								<input type="text" v-model="form.remark" placeholder="请填写备注" />
							</view>
						</view>
					</view>
				</view>
				<view class="cartBox">
					<view class="cartList">
						<view class="plotAddress">
							<text>土地地址</text>
							<view class="plotAddressBorder">
								{{product.plotAddress}}
							</view>
						</view>
					</view>
				</view>
				<view class="cartBox">
					<view class="cartList">
						<view class="plotAddress">
							<text>支付方式</text>

							<radio-group name="pay" @change="payWay">
								<view class="plotAddressBorder between">
									<view class="center_vertical">
										<view>
											<image
												src="https://www.tdtye.com/files/vegetable_mall_file/default/static/growVegetables/pay_icon.png"
												class="icon"></image>
										</view>
										<view>
											微信支付
										</view>
									</view>
									<view>
										<radio value="wechat" />
									</view>
								</view>
								<view class="plotAddressBorder between">
									<view class="center_vertical">
										<view>
											<image
												src="https://www.tdtye.com/files/vegetable_mall_file/default/static/growVegetables/wallet_icon.png"
												class="icon">
											</image>
										</view>
										<view>
											余额支付
										</view>
									</view>
									<view>
										<radio value="balance" />
									</view>
								</view>
							</radio-group>

						</view>
					</view>
				</view>
				<!-- 上传照片 -->
				<!-- <view class="photoBox">
				<view>
					<template v-for="item in base64arr">
						<image :src="item" style="width: 50px;height: 50px;margin-left: 20rpx;"></image>
					</template>
				</view>
				<view>
					<button class="photobtn" type="primary" plain size="mini" @tap="uploadPhotos">上传照片</button>
				</view>
			</view> -->
				<view class="cartBottom">
					<!-- <view>
					<radio value="全选" style="transform: scale(.8);" /><text>全选</text>
				</view> -->
					<view class="allcount">总计:<text class="food-price"
							style="margin-left: 10rpx;">￥{{product.growPrice}}</text></view>
					<view class="rightbot">
						<view class="settlementBox" @click="subOrder">提交订单</view>
					</view>
				</view>
			</block>
		</skeleton>
	</view>
</template>

<script>
	import Skeleton from '@/components/ls-skeleton/ls-skeleton.nvue';
	export default {
		components: {
			Skeleton
		},
		data() {
			return {
				form: {
					id: "",
					amount: 0.0,
					img: "",
					remark: "",
					payWay: ""
				},
				product: {},
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				weight: null,
				base64arr: [],
				checked: false,
				imgapi: "",
				mark: '',
				totalPrice: 0.00, //总价

				loading: true,
				skeleton: [
					'square+line*2',
					'line*2',
					40,
					'line',
					40,
					'line*2',
					40,
					'line*3',

				], //骨架屏
			}
		},
		onLoad(e) {
			uni.hideShareMenu()
			this.imgapi = this.$reqConfig.URLIMAGE
			let detail = JSON.parse(decodeURIComponent(e.product));
			this.product = detail.productDetail
			this.product.plotAddress = detail.address
			this.form.id = this.product.id
			this.form.type = 2

			// 骨架屏取消
			this.loading = false;
		},
		methods: {
			//单选事件
			payWay(e) {
				this.form.payWay = e.detail.value
			},

			//提交订单，点击提交订单按钮的时候加一个加载图标的全局遮罩，等请求完成后再放开
			subOrder() {
				if (!this.form.payWay) {
					uni.showToast({
						title: "请选择支付方式",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				uni.showLoading({
						title: "订单提交中"
					}),
					this.$axios({
						url: `user/plot/subOrder`,
						method: "post",
						data: {
							id: this.form.id,
							type: 2,
							remark: this.form.remark,
							payType:this.form.payWay=="wechat"?2:1
						}
					}).then((res) => {
						uni.hideLoading()
						if (res.code == 0) {
							uni.showToast({
								title: "订单提交成功",
								icon: 'none',
								duration: 2000
							})
							uni.redirectTo({
								url: '../mine/shopOrder'
							})
							//成功提交执行对应操作
							if (this.form.payWay == "balance") {
								console.log("余额支付")
								uni.showLoading({
										title: "余额支付中......"
									}),
									this.balancePay(res.result)
								uni.hideLoading()
							} else {
								uni.showLoading({
										title: "微信支付中......"
									}),
									this.weChatPay(res.result)
							}


						}
					})
			},
			//微信支付
			weChatPay(orderNum) {
				console.log("微信支付")
				this.$axios({
					url: "wx/pay/createJsApiOrder",
					method: "post",
					data: {
						orderNum: orderNum,
						type: 3
					}
				}).then((response) => {
					uni.hideLoading()
					if (response.code == 0) {
						uni.requestPayment({
							provider: 'wxpay', //支付类型-固定值
							timeStamp: response.result.timeStamp, // 时间戳（单位：秒）
							nonceStr: response.result.nonceStr, // 随机字符串
							package: response.result.packageValue, // 固定值
							signType: response.result.signType, //固定值
							paySign: response.result.paySign, //签名
							success: function(response) {
								uni.showToast({
									title: '支付成功！',
									icon: "none",
								})
							},
							fail: function(err) {
								uni.showToast({
									title: '支付失败,请在订单列表处重新支付',
									icon: "none",
								})
							},
							complete: function(ress) {
								//跳转到订单列表
								uni.redirectTo({
									url: '../../pages/mine/order'
								})
							}
						});
					}
				})
			},
			// 余额支付
			balancePay(orderNum) {
				this.$axios({
					url: `user/plot/balancePay`,
					method: "post",
					data: {
						orderNum: orderNum,
					}
				}).then((res) => {
					if (res.code == 0) {
						uni.showToast({
							title: "支付成功!",
							icon: 'none',
							duration: 2000
						})
						//跳转到订单列表
						uni.redirectTo({
							url: '../../pages/mine/order'
						})
					} else {
						uni.showToast({
							title: res.result,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			checkeds() {
				this.checked = !this.checked
				console.log('3333')
			}

		}
	}
</script>

<style scoped>
	/* 这个样式改一下，改成贴左 */
	.plotAddress {
		margin: 15rpx 15rpx 25rpx;
		font-size: 13px;
		text-align: left;
		/* color: #777777; */
	}

	.icon {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
		margin-top: 10rpx;
	}

	.cartBox {
		width: 750rpx;
		text-align: center;
		margin-top: 15rpx;
	}

	.cartBoxBot {
		display: flex;
		justify-content: space-between;
		margin: 15rpx 15rpx 25rpx;
		padding-top: 20rpx;
		border-top: 0.5rpx solid #eeeeee;
	}

	.plotAddressBorder {
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-top: 0.5rpx solid #eeeeee;
	}

	.cartBoxBot2 {
		display: flex;
		justify-content: space-between;
		margin: 15rpx 15rpx 25rpx;
		/* padding-top:20rpx; */
	}

	.cartList {
		width: 89vw;
		margin: 10rpx auto;
		/* height: calc(22vw + 34rpx); */
		border-radius: 12rpx;
		background-color: #fff;
		box-shadow: 0px 4rpx 16rpx rgba(0, 0, 0, .1);
		overflow: hidden;
		border: 0;
		position: relative;
		margin-bottom: 20rpx;
	}

	.phoFlex {
		display: flex;
		margin-left: 20rpx;
	}

	.checkboxBox {
		padding-left: 16rpx;
		flex-shrink: 0;
		height: 22vw;
		line-height: 22vw;
		margin-right: 16rpx;
		align-items: center;
		position: relative;
		width: 30rpx;
	}

	.imgBox {
		width: 22vw;
		height: 22vw;
		flex-shrink: 0;
		margin-left: 15rpx;
		border-radius: 8rpx;
		overflow: hidden;
		margin-right: 10rpx;
		position: relative;
	}

	.rightBox {
		height: 22vw;
		width: 70%;
		padding-right: 15rpx;
		position: relative;
	}

	.rightBoxtop {
		text-align: left;
		margin-top: 10rpx;
		font-size: 26rpx;
	}

	.food-btm {
		text-align: left;
		margin-top: 20rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.food-price {
		color: #f01414;
		font-size: 16px;
	}

	.photobtn {
		margin-left: 10rpx;
		height: 50rpx;
		font-size: 18rpx;
		width: 130rpx;
		line-height: 50rpx;
	}

	.cartBottom {
		padding-left: 20rpx;
		width: 750rpx;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		height: 11vw;
		display: flex;
		align-items: center;
	}

	.allcount {
		color: #C4C4C4;
		margin-left: 20rpx;
	}

	.delBox {
		height: 9vw;
		width: 120rpx;
		border-radius: 30rpx;
		margin-right: 20rpx;
		line-height: 9vw;
		text-align: center;
		color: #fff;
		background-color: #C4C4C4;
	}

	.settlementBox {
		height: 9vw;
		width: 180rpx;
		padding: 0 50rpx;
		border-radius: 40rpx;
		margin-right: 20rpx;
		line-height: 9vw;
		text-align: center;
		color: #fff;
		background-color: #3cc51f;

	}

	.rightbot {
		margin-right: 15rpx;
		position: absolute;
		right: 0;
		display: flex;
	}

	.photoBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 680rpx;
		height: 130rpx;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 20rpx;
	}
</style>
